<template>
  <div>
    <h2>点击数字＋1；长按数字连加</h2>
    <div class="long-press" @click="handleClick" v-longpress:500="handleLongPress">
      {{ number }}
    </div>
  </div>
</template>

<script>
export default {
  name: "longPress",
  data() {
    return {
      number: 0,
      longPressFlag: false,
      longTimer: null
    }
  },
  methods: {
    handleClick() {
      if (this.longPressFlag) {
        clearInterval(this.longTimer)
        this.longPressFlag = false
        return
      }
      this.number++
    },
    handleLongPress() {
      this.longPressFlag = true
      this.longTimer = setInterval(() => this.number++, 10)
    },
  }
}
</script>

<style scoped>
h2 {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.long-press {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background: orangered;
  color: #FFFFFF;
  cursor: pointer;
  user-select: none;
}
</style>
